<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">车辆列表</h5>
      </div>
      <div class="text-end col col-md-6">
        <div class="text-lg-end pt-1">
          <button class="btn btn-outline-danger me-2" type="button" (click)="deleteSelected()" [disabled]="selectedItems.length === 0">
            <i class="fa fa-trash me-1"></i>
            批量删除 <span *ngIf="selectedItems.length > 0">({{selectedItems.length}})</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body border-bottom">
    <form (ngSubmit)="loadData()" #searchForm="ngForm">
      <div class="row">
        <div class="col-md-6 mb-3">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="输入发货人/收货人/货物/订单号关键字..."
              [(ngModel)]="searchKeyword"
              name="searchKeyword"
            />
            <button class="btn btn-outline-primary" type="submit">
              <i class="fa fa-search me-1"></i>搜索
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th width="40px">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" [checked]="isAllSelected" (change)="selectAll(selectAllCheckbox.checked)" #selectAllCheckbox>
              </div>
            </th>
            <th>序号</th>
            <th>司机</th>
            <th>车号</th>
            <th>发货人</th>
            <th>发货地址</th>
            <th>收货人</th>
            <th>收货地址</th>
            <th>货物</th>
            <th>件数</th>
            <th>提送方式</th>
            <th>体积(m³)</th>
            <th>重量(kg)</th>
            <th>长(m)</th>
            <th>宽(m)</th>
            <th>高(m)</th>
            <th>运费</th>
            <th>回单要求</th>
            <th>客户号</th>
            <th>订单号</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let car of carInventry.items; let i = index">
            <td>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" [checked]="selectedItems.includes(car.id)" (change)="toggleItemSelection(car.id)" #rowCheckbox>
              </div>
            </td>
            <td>{{ (list.page - 1) * currentPageSize + i + 1 }}</td>
            <td>{{ car.vehicleName }}</td>
            <td>{{ car.vehicleNumber }}</td>
            <td>{{ car.shipper }}</td>
            <td>{{ car.shipperAddress }}</td>
            <td>{{ car.consignee }}</td>
            <td>{{ car.consigneeAddress }}</td>
            <td>{{ car.goods }}</td>
            <td>{{ car.pieceCount }}</td>
            <td>{{ car.declaration }}</td>
            <td>{{ car.cubicMeterss }}</td>
            <td>{{ car.weightk }}</td>
            <td>{{ car.lengthm }}</td>
            <td>{{ car.widthm }}</td>
            <td>{{ car.heightm }}</td>
            <td>{{ car.freightAmount }}</td>
            <td>{{ car.returnRequired }}</td>
            <td>{{ car.customerNo }}</td>
            <td>{{ car.orderNo }}</td>
            <td>{{ car.remarks }}</td>
            <td>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-md-6">
        <div class="pagination-info" *ngIf="carInventry.items.length > 0">
          当前显示 {{ carInventry.totalCount > 0 ? ((list.page - 1) * currentPageSize) + 1 : 0 }} - {{ Math.min(list.page * currentPageSize, carInventry.totalCount) }} 条，总计 {{ carInventry.totalCount }} 条
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex justify-content-end align-items-center">
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;" [(ngModel)]="currentPageSize" (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          <nav aria-label="分页导航" *ngIf="carInventry.items.length > 0">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <ng-container *ngFor="let page of visiblePageNumbers">
                <li class="page-item disabled" *ngIf="page < 0">
                  <span class="page-link">...</span>
                </li>
                <li class="page-item" *ngIf="page > 0" [class.active]="list.page === page">
                  <a class="page-link" href="javascript:;" (click)="goToPage(page)">{{ page }}</a>
                </li>
              </ng-container>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(maxPageCount)">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="ms-3 d-flex align-items-center" *ngIf="maxPageCount > 1">
            <span class="me-2">跳至</span>
            <input
              type="number"
              class="form-control form-control-sm"
              style="width: 60px;"
              min="1"
              [max]="maxPageCount"
              [(ngModel)]="inputPageNumber"
              (change)="onPageInputChange($event)"
              (keyup)="onPageInputKeyUp($event)"
            />
            <span class="ms-2">页</span>
            <button class="btn btn-sm btn-outline-primary ms-2" (click)="goToPage(inputPageNumber)">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="carInventry.items.length === 0" class="text-center">
      <p>暂无数据</p>
    </div>
  </div>
</div>
<div class="modal fade" [class.show]="isModalOpen" [class.d-block]="isModalOpen" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ isEditMode ? '编辑车辆' : '新建车辆' }}</h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <form [formGroup]="createCarInventryForm">
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="FleetcarId" class="form-label">发车单ID<span class="text-danger">*</span></label>
              <input type="number" class="form-control" id="FleetcarId" formControlName="FleetcarId">
            </div>
            <div class="col-md-6">
              <label for="VehicleId" class="form-label">车辆ID</label>
              <input type="number" class="form-control" id="VehicleId" formControlName="VehicleId">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="VehicleName" class="form-label">车辆名称</label>
              <input type="text" class="form-control" id="VehicleName" formControlName="VehicleName">
            </div>
            <div class="col-md-6">
              <label for="VehicleNumber" class="form-label">车牌号</label>
              <input type="text" class="form-control" id="VehicleNumber" formControlName="VehicleNumber">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="Shipper" class="form-label">发货人</label>
              <input type="text" class="form-control" id="Shipper" formControlName="Shipper">
            </div>
            <div class="col-md-6">
              <label for="ShipperAddress" class="form-label">发货地址</label>
              <input type="text" class="form-control" id="ShipperAddress" formControlName="ShipperAddress">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="Consignee" class="form-label">收货人</label>
              <input type="text" class="form-control" id="Consignee" formControlName="Consignee">
            </div>
            <div class="col-md-6">
              <label for="ConsigneeAddress" class="form-label">收货地址</label>
              <input type="text" class="form-control" id="ConsigneeAddress" formControlName="ConsigneeAddress">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="Goods" class="form-label">货物</label>
              <input type="text" class="form-control" id="Goods" formControlName="Goods">
            </div>
            <div class="col-md-6">
              <label for="PieceCount" class="form-label">件数</label>
              <input type="number" class="form-control" id="PieceCount" formControlName="PieceCount">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="Declaration" class="form-label">提送方式</label>
              <input type="text" class="form-control" id="Declaration" formControlName="Declaration">
            </div>
            <div class="col-md-6">
              <label for="CubicMeterss" class="form-label">体积(m³)</label>
              <input type="number" class="form-control" id="CubicMeterss" formControlName="CubicMeterss">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="Weightk" class="form-label">重量(kg)</label>
              <input type="number" class="form-control" id="Weightk" formControlName="Weightk">
            </div>
            <div class="col-md-6">
              <label for="Lengthm" class="form-label">长(m)</label>
              <input type="number" class="form-control" id="Lengthm" formControlName="Lengthm">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="Widthm" class="form-label">宽(m)</label>
              <input type="number" class="form-control" id="Widthm" formControlName="Widthm">
            </div>
            <div class="col-md-6">
              <label for="Heightm" class="form-label">高(m)</label>
              <input type="number" class="form-control" id="Heightm" formControlName="Heightm">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="FreightAmount" class="form-label">运费</label>
              <input type="number" class="form-control" id="FreightAmount" formControlName="FreightAmount">
            </div>
            <div class="col-md-6">
              <label for="ReturnRequired" class="form-label">回单要求</label>
              <input type="text" class="form-control" id="ReturnRequired" formControlName="ReturnRequired">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="CustomerNo" class="form-label">客户号</label>
              <input type="number" class="form-control" id="CustomerNo" formControlName="CustomerNo">
            </div>
            <div class="col-md-6">
              <label for="OrderNo" class="form-label">订单号</label>
              <input type="text" class="form-control" id="OrderNo" formControlName="OrderNo">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-12">
              <label for="Remarks" class="form-label">备注</label>
              <textarea class="form-control" id="Remarks" rows="3" formControlName="Remarks"></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeModal()">取消</button>
        <button type="button" class="btn btn-primary" (click)="save()" [disabled]="createCarInventryForm.invalid || isSaving">
          <i *ngIf="isSaving" class="fa fa-spinner fa-spin me-1"></i>
          {{ isEditMode ? '更新' : '保存' }}
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal-backdrop fade show" *ngIf="isModalOpen"></div> 